<template>
  <div id="app">
    <!-- 顶部 -->
    <div class="headerbox">
      <nav class="sub-nav">
      <router-link to='/HelloWorld' class="on"><img src="./assets/baiduMusic.jpg" alt />
         </router-link>
        <router-link to="/Singer" class="nav-list">歌手</router-link>
        <router-link to="/" class="nav-list">榜单</router-link>
        <router-link to="/" class="nav-list">我的</router-link>
        <router-link to="/" class="nav-list">搜索</router-link>
      </nav>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style scoped>
.headerbox {
  background-color: #f9f9f9;
  height: 40px;
}
.sub-nav {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  padding-top: 10px;
}
.sub-nav .nav-list {
  font-size: 16px;
  color: #999;
  font-family: "宋体";
}
.sub-nav img {
  width: 20px;
  height: 20px;
}
</style>
